<template>
  <div class="p-4">
    <div id="SwSearch" class="basicFormClass1">
      <BasicForm
        class="mr_12"
        ref="formRef"
        :schemas="thisSchemas"
        :colon="true"
        :labelWidth="labelWidth"
        :compact="compact"
        :showAdvancedButton="false"
        :autoSubmitOnEnter="autoSubmitOnEnter"
        :showActionButtonGroup="showActionButtonGroup"
        :submitButtonOptions="{text: submitButtonText }"
        :showButton="false"
        :rowProps="{
          gutter: [20, 20],
        }"
        @reset="handleReset"
        @submit="handleSubmit"
      >
        <template v-for="(_index, name) in $slots" #[name]="data">
          <slot :name="name" v-bind="data"></slot>
        </template>
        <template #advanceBefore>
          <a-button
            v-show="showButton"
            type="link"
            size="small"
            @click="changeSc"
            style="font-weight: 500"
          >
            {{ showName }}
            <BasicArrow v-if="showBl" class="ml-1" down />
            <BasicArrow v-else class="ml-1" up />
          </a-button>
        </template>
      </BasicForm>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { withDefaults, ref, unref } from 'vue';
  import { pullAt, differenceWith, concat } from 'lodash-es';
  import { BasicForm, FormSchema } from '/@/components/Form/index';
  import { BasicArrow } from '/@/components/Basic';
  const props = withDefaults(
    defineProps<{
      schemas: FormSchema[]; //列描述数据对象
      labelWidth?: number; //label的宽度
      compact?: boolean; //是否为紧凑型表单,默认是
      autoSubmitOnEnter?: boolean; // 在input中输入时按回车自动提交
      showActionButtonGroup?: boolean; //是否默认展示重置及提交按钮
      submitButtonText?: string; // 查询按钮的文字
      isHiden?: boolean
      expand?: boolean
    }>(),
    {
      labelWidth: 100, //label的宽度
      compact: true, //是否为紧凑型表单,默认是
      autoSubmitOnEnter: false, //在input中输入时按回车自动提交
      showActionButtonGroup: true, //是否默认展示重置及提交按
      submitButtonText: '查 询',
      isHiden: true,
      expand: false
    },
  );

  const { schemas } = props;
  const emits = defineEmits(['submit', 'reset', 'changeShowBotton']); //回调
  const formRef = ref<any>(null); //ref回调
  const constSchemas = ref<FormSchema | object[] | undefined>();
  const openScemas = ref<FormSchema | object[] | undefined>();
  const thisSchemas = ref<FormSchema | object[] | undefined>();
  const showBl = ref<boolean>(true);
  const showName = ref<string>('展开');
  const changeKey = ref<number>(1);
  const showButton = ref<boolean>(true);
  const list = schemas.filter((item) => item.ifShow !== false);
  if (list.length > 3 && props.isHiden) {
    constSchemas.value = pullAt(list, [0, 1, 2]);
    openScemas.value = differenceWith(list, constSchemas.value);
    thisSchemas.value = constSchemas.value;
    showButton.value = true;
  } else {
    thisSchemas.value = list;
    showButton.value = list.length > 3 ? true : false;
  }

  // console.log("constSchemas.value-------", constSchemas.value);
  // console.log("openScemas.value--------", openScemas.value);

  const handleSubmit = (values: any) => {
    emits('submit', values);
  };

  const handleReset = (values: any) => {
    emits('reset', values);
  };

  const getFieldsValue = () => {
    return formRef.value.getFieldsValue();
  };

  const validate = async () => {
    return await formRef.value.validate()
  };

  const setFieldsValue = (data: any) => {
    console.log('setFieldsValue=----->',data);
    return formRef.value.setFieldsValue(data);
  };
  const setProps = (data) => {
    return formRef.value.setProps(data)
  }

  const changeSc = () => {
    if (unref(showBl)) {
      thisSchemas.value = concat(thisSchemas.value, openScemas.value);
      showName.value = '收起';
    } else {
      thisSchemas.value = constSchemas.value;
      showName.value = '展开';
    }
    changeKey.value = Math.random();
    showBl.value = !showBl.value;
    emits('changeShowBotton', showBl.value);
  };

  if (props.expand) {
    changeSc()
  }

  defineExpose({
    getFieldsValue,
    setFieldsValue,
    validate,
    setProps,
    changeSc,
    showBl
  });
</script>
<style lang="less" scoped>
  .mr_12 {
    margin-top: 12px;
  }

  .basicFormClass1 {
    background-color: #ffffff;
    padding: 15px 10px;
    margin-top: -40px;
  }
</style>
<style lang="less">
  #SwSearch {
    .ant-calendar-picker {
      width: 100% !important;
    }
  }
</style>
